<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="./lib/vue.min.js"></script>
    <script src="./lib/element-ui/index.js"></script>
    <script src="./lib/axios.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="./lib/element-ui/index.js"></script>

    <script src="./lib/echarts.min.js"></script>

    <link rel="stylesheet" href="./lib/element-ui/index.css" />
    <style>
      .el-button {
        display: inline-block;

        white-space: nowrap;

        cursor: pointer;

        border: 1px solid #dcdfe6;

        -webkit-appearance: none;

        box-sizing: border-box;

        outline: 0;

        margin: 0;

        transition: 0.1s;

        font-weight: 500;

        font-size: 26px;

        border-radius: 4px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div>
        <h1 style="display: flex; justify-content: center">
          天津市数字经济人才培养基地
        </h1>
        <h2 style="display: flex; justify-content: center; margin-bottom: 40px">
          评优活动
        </h2>
      </div>
      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
      <div
        id="main"
        style="
          width: 86%;
          height: 560px;
          display: flex;
          justify-content: center;
          margin-left: 110px;
        "
      ></div>
      <div style="display: flex; justify-content: center; margin-top: 10px">
        <el-button
          @click="run1(arr78910)"
          style="width: 300px; height: 60px"
          size="medium"
          type="primary"
          round
          >第6，7，8名</el-button
        >
        <el-button
          @click="run1(arr456)"
          style="width: 300px; height: 60px"
          size="medium"
          type="success"
          round
          >第4，5名</el-button
        >
        <el-button
          @click="run1(arr123)"
          size="medium"
          style="width: 300px; height: 60px"
          type="danger"
          round
          >第1，2，3名</el-button
        >
      </div>
      <h3 style="float: right; margin-right: 50px">新技术开发团队</h3>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data() {
          return {
            option: {},
            myChart: {},
            seriesData: [
              // { ticket: 70 },
              // { ticket: 40 },
              // { ticket: 60 },
              // { ticket: 30 },
              // { ticket: 50 },
              // { ticket: 20 },
              // { ticket: 80 },
              // { ticket: 10 },
              // { ticket: 90 },
              // { ticket: 100 },
            ], //1
            arr78910: [],
            arr456: [],
            arr123: [],
            arr45678: [],
            // isShow123: true,
          };
        },
        created() {
          // 指定图表的配置项和数据
        },
        methods: {
          run1(arr) {
            if (arr[0] == this.arr123[0]) {
              this.option.series[0].label.normal.show = true;
              // this.isShow123 = false;
            }
            //开始定时器
            let gameOver = setInterval(() => {
              for (let i = arr.length - 1; i >= 0; --i) {
                if (
                  this.seriesData[arr[i]].ticket ==
                  this.option.series[0].data[arr[i]]
                ) {
                  let is = false;
                  let num = 0;
                  for (let index = 0; index < arr.length - 1; index++) {
                    if (
                      this.seriesData[arr[index]].ticket ==
                      this.option.series[0].data[arr[index]]
                    )
                      num++;
                    if (num == arr.length) {
                      is = true;
                    }
                  }
                  if (is) {
                    clearInterval(gameOver);
                  }

                  // if (
                  //   this.seriesData[this.arr78910[0]].ticket ==
                  //     this.option.series[0].data[this.arr78910[0]] &&
                  //   this.seriesData[this.arr78910[1]].ticket ==
                  //     this.option.series[0].data[this.arr78910[1]] &&
                  //   this.seriesData[this.arr78910[2]].ticket ==
                  //     this.option.series[0].data[this.arr78910[2]]
                  // )
                  //   clearInterval(gameOver);
                } else {
                  this.option.series[0].data[arr[i]] += 1;
                }
              }
              this.myChart.setOption(this.option);
            }, 100);
          },
          // run2() {
          //   //开始定时器
          //   let gameOver = setInterval(() => {
          //     for (let i = 1; i >= 0; --i) {
          //       if (
          //         this.seriesData[this.arr456[i]].ticket ==
          //         this.option.series[0].data[this.arr456[i]]
          //       ) {
          //         if (
          //           this.seriesData[this.arr456[0]].ticket ==
          //             this.option.series[0].data[this.arr456[0]] &&
          //           this.seriesData[this.arr456[1]].ticket ==
          //             this.option.series[0].data[this.arr456[1]]
          //         )
          //           clearInterval(gameOver);
          //       } else {
          //         this.option.series[0].data[this.arr456[i]] += 1;
          //       }
          //     }
          //     this.myChart.setOption(this.option);
          //   }, 100);
          // },
          // run3() {
          //   if (this.isShow123) {
          //     this.option.series[0].label.normal.show = true;
          //     this.isShow123 = false;
          //   }

          //   //开始定时器
          //   let gameOver = setInterval(() => {
          //     for (let i = 2; i >= 0; --i) {
          //       // console.log(this.seriesData)
          //       // console.log(this.arr123)
          //       if (
          //         this.seriesData[this.arr123[i]].ticket ==
          //         this.option.series[0].data[this.arr123[i]]
          //       ) {
          //         if (
          //           this.seriesData[this.arr123[0]].ticket ==
          //             this.option.series[0].data[this.arr123[0]] &&
          //           this.seriesData[this.arr123[1]].ticket ==
          //             this.option.series[0].data[this.arr123[1]] &&
          //           this.seriesData[this.arr123[2]].ticket ==
          //             this.option.series[0].data[this.arr123[2]]
          //         )
          //           //   this.option.series[0].data[this.arr78910[0]] = "";
          //           // this.option.series[0].data[this.arr78910[1]] = "";
          //           // this.option.series[0].data[this.arr78910[2]] = "";
          //           // this.option.series[0].data[this.arr456[0]] = "";
          //           // this.option.series[0].data[this.arr456[1]] = "";
          //           // this.option.series[0].label.normal.show = true;
          //           clearInterval(gameOver);
          //       } else {
          //         this.option.series[0].data[this.arr123[i]] += 1;
          //       }
          //     }
          //     this.myChart.setOption(this.option);
          //   }, 100);
          // },
        },
        mounted() {
          // 基于准备好的dom，初始化echarts实例
          this.myChart = echarts.init(document.getElementById("main"));
          this.option = {
            xAxis: {
              type: "category",
              data: [],
              axisLabel: {
                interval: 0, //横轴信息全部显示
                rotate: 0, //-35度角倾斜显示
                textStyle: {
                  fontSize: "14",
                },
              },
              axisLine: {
                lineStyle: {
                  fontSize: 40,
                },
              },
            },
            yAxis: {
              type: "value",
              axisLabel: {
                textStyle: {
                  fontSize: "20",
                },
              },
              min: 0,
              max: 200,
              // axisLine: {
              //   lineStyle: {},
              // },
            },
            series: [
              {
                data: [0, 0, 0, 0, 0, 0, 0, 0], //改
                type: "bar",

                itemStyle: {
                  barBorderRadius: [5, 2, 0, 0], //柱体圆角
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      //只要修改前四个参数就ok
                      offset: 0,
                      color: "#005BEA",
                    }, //柱图渐变色
                    {
                      offset: 1,
                      color: "#00C6FB",
                    },
                  ]),
                },
                label: {
                  normal: {
                    show: false,
                    position: "top",
                    textStyle: {
                      //数值样式
                      fontSize: 40,
                      color: "black",
                    },
                    // formatter:  (params)=> {
                    //   //核心部分 formatter 可以为字符串也可以是回调
                    //   console.log(this.arr123)
                    //   console.log(this.seriesData[this.arr123[0]].ticket)
                    //   if (params.value) {
                    //     //如果当前值存在则拼接
                    //     return "";
                    //   } else {
                    //     //否则返回个空
                    //     return params.value;
                    //   }
                    // },
                  },
                },
              },
            ],

            animationDelay: 0,
            animationDuration: 0,
            animationEasing: "linear",
            animationEasingUpdate: "linear",
          };

          this.myChart.setOption(this.option);

          // this.option.xAxis.data = [
          //   "刘晋玮",
          //   "刘晋玮",
          //   "刘晋玮",
          //   "刘晋玮",
          //   "刘晋玮",
          //   "刘晋玮",
          //   "刘晋玮",
          //   "刘晋玮",
          //   "刘晋玮",
          //   "刘晋玮",
          // ];

          axios({
            method: "get",
            url: "/vote/getResult",
          }).then((res) => {
            // console.log(res);

            this.option.xAxis.data = res.data.data.map((el) => {
              return el.name;
            });
            // console.log(this.option.xAxis.data)
            this.seriesData = res.data.data;
            //改
            for (let i = 8; i > 5; i--) {
              let temp;
              this.seriesData.forEach((item, index) => {
                if (item.rank == i) {
                  temp = index;
                  this.arr45678.push(item);
                }
              });
              this.arr78910.push(temp);
            }
            for (let i = 5; i > 3; i--) {
              let temp;
              this.seriesData.forEach((item, index) => {
                if (item.rank == i) {
                  temp = index;
                  this.arr45678.push(item);
                }
              });
              this.arr456.push(temp);
            }
            for (let i = 3; i >= 1; i--) {
              let temp;
              this.seriesData.forEach((item, index) => {
                if (item.rank == i) {
                  temp = index;
                }
              });
              this.arr123.push(temp);
            }
            // console.log(this.arr123);
            // console.log(this.arr456);
            // console.log(this.arr78910);
            // console.log(this.arr45678);
            // console.log(this.seriesData)

            // 使用刚指定的配置项和数据显示图表。
            (this.option.series[0].label.normal.formatter = (params) => {
              //核心部分 formatter 可以为字符串也可以是回调
              // console.log(params.name);
              // console.log(this.arr45678);
              let istrue = false;
              for (let index = 0; index < this.arr45678.length; index++) {
                if (this.arr45678[index].name == params.name) {
                  istrue = true;
                }
              }
              if (istrue) {
                //如果当前值存在则拼接
                return "";
              } else {
                //否则返回个空
                return params.value;
              }
            }),
              this.myChart.setOption(this.option);
          });
        },
      });
    </script>
  </body>
</html>
